@extends('admin.layout.main')
@section('content')
    <!-- daterange picker -->
    <link rel="stylesheet" href="{{asset('/adminlte/plugins/daterangepicker/daterangepicker.css')}}">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{asset('/adminlte/plugins/iCheck/all.css')}}">
    <style type="text/css">
      .left-filter{margin-left:8px;}
      img{
        cursor: pointer;  
        transition: all 0.6s;  
      }
      img:hover{  
        transform: scale(10);  
      } 
    </style>
    <section class="content-header">
      <h1>每日充值统计<span style="font-size:15px">{{$period}}</span></h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i> 每日统计</a></li>
        <li class="active">每日充值统计</li>
      </ol>
    </section>
    <section class="content">
        <a type="button" class="btn btn-info pull-left filter-game" href="javascript:void(0)"><i class="fa fa-fw fa-search"></i>筛选</a>
        <div class="row">
            <div class="col-md-4">
                <div class="box box-primary">
                  <div class="box-header with-border">
                    <i class="fa fa-bar-chart-o"></i>

                    <h3 class="box-title">充值金额：￥{{$total}}</h3>

                    <div class="box-tools pull-right">
                      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                      </button>
                      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                  </div>
                  <div class="box-body">
                    <div id="bar-chart" style="height: 300px;"></div>
                  </div>
                  <!-- /.box-body-->
                </div>
            </div>
            <div class="col-md-7">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <i class="fa fa-fw fa-list-alt"></i>

                  <h3 class="box-title">充值详情：</h3>

                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <table id="example2" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                      <th>订单号</th>
                      <th>付款用户</th>
                      <th>订单金额</th>
                      <th>支付时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if($charge_data)
                      @foreach($charge_data as $charge)
                        <tr>
                          <td>{{$charge->order_sn}}</td>
                          <td>@if($charge->user)<img src="{{$charge->user->headimg}}" style="width:20px">{{base64_decode($charge->user->name)}}@endif</td>
                          <td>{{$charge->order_amount}}</td>
                          <td>{{$charge->updated_at}}</td>
                        </tr>
                      @endforeach
                    @endif  
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
        </div>    
    </section>
    <!-- datepicker -->
    <script src="{{asset('/adminlte/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/chartjs/Chart.min.js')}}"></script>
    <!-- date-range-picker -->
    <script src="{{asset('/js/moment.min.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/daterangepicker/daterangepicker.js')}}"></script>
    <!-- iCheck 1.0.1 -->
    <script src="{{asset('/adminlte/plugins/iCheck/icheck.min.js')}}"></script>
    <!-- DataTables -->
    <script src="{{asset('/adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/datatables/dataTables.bootstrap.min.js')}}"></script>
    <!-- FLOT CHARTS -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.min.js')}}"></script>
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.resize.min.js')}}"></script>
    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.pie.min.js')}}"></script>
    <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.categories.min.js')}}"></script>
    <script type="text/javascript">
      $(function () {
        var data = {!! $data !!};
        if (data.length) {
          var bar_data = {
            data: data,
            color: "#38A0F0"
          };
          $.plot("#bar-chart", [bar_data], {
            grid: {
              borderWidth: 1,
              borderColor: "#f3f3f3",
              tickColor: "#f3f3f3"
            },
            series: {
              bars: {
                show: true,
                barWidth: 0.5,
                align: "center"
              }
            },
            xaxis: {
              mode: "categories",
              tickLength: 1
            }
          });
        }
      });

      $(function () {
        $('#example2').DataTable({
          "paging": true,
          "lengthChange": true,
          "searching": true,
          "ordering": false,
          "info": true,
          "autoWidth": false,
          "processing": true,
          language: {  
              "sProcessing": "处理中...",  
              "sLengthMenu": "显示 _MENU_ 项结果",  
              "sZeroRecords": "没有匹配结果",  
              "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",  
              "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",  
              "sInfoFiltered": "(由 _MAX_ 项结果过滤)",  
              "sInfoPostFix": "",  
              "sSearch": "搜索:",  
              "sUrl": "",  
              "sEmptyTable": "表中数据为空",  
              "sLoadingRecords": "载入中...",  
              "sInfoThousands": ",",  
              "oPaginate": {  
                  "sFirst": "首页",  
                  "sPrevious": "上页",  
                  "sNext": "下页",  
                  "sLast": "末页"  
              },  
              "oAria": {  
                  "sSortAscending": ": 以升序排列此列",  
                  "sSortDescending": ": 以降序排列此列"  
              }  
            } 
        });
      });

      $('.filter-game').click(function(){
        dialog_from('/admin/charge_statistic/filter', '筛选');
      });
    </script>
@endsection    